<template>
    <div>
        <h2> {{ msg }} </h2><hr>
        <h3> {{$store.state.count}} - {{ count }} </h3>
        <p>
            <button @click="add(10)">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </p>
        <p>
            <button @click="addAction">+</button>
            <button @click="reduceAction">-</button>
        </p>
    </div>
</template>

<script>
import store from '@/vuex/store'
import { mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      msg: 'Hello Vuex'
    }
  },
  computed: {
    // ...mapState(['count'])
    // ...mapGetters(['count'])
    count () {
      return this.$store.state.a.count
    }
  },

  store,
  methods: {
    ...mapMutations(['add', 'reduce']),
    ...mapActions(['addAction', 'reduceAction'])
  }
}
</script>
